<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<title>Line Chart Template</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1,  minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../common/css/app.min.css">
<script src="../common/js/jQuery2.0.2.min.js"></script>
<script src="../common/js/d3.v3.min.js"></script>
<script src="../common/js/main.min.js"></script>

<script>
$(document).ready(function() {
    reportObj.init({
        graphType: "line",
        jsonURL: "../common/json/sales.json",
        line: {
            periods : [10, 30]
        },
        axis: {
            xAxisIndex: "date",
            yAxisIndex: "total"
        }
    });
});
</script>

</head>

<body>

<div class="app-wrapper">

<nav class="main-menu">
<a href="#">Something</a>
<a href="#">Something</a>
<a href="#">Something</a>
</nav><!--#main-menu-->

<header>
<div class="main-menu-button main-menu-button-left"><a class="left-arrow">&nbsp;</a></div>
<div class="main-menu-button main-menu-button-right"><a class="gear">&nbsp;</a></div>
<h1>Sales Report</h1>
</header>

<div class="app-content">

<div class="detail-view-header">
    <div class="content">
        <h1>Sales</h1>
    </div><!--.content-->
</div><!--.detail-view-header-->

<section class="border-bottom">
  <div class="content padding-bottom-gutter">
    <h3>Show Sales From</h3>
    <div id="graph-data-select"></div>
  </div>
</section>

<section>
	<div class="content">
		<div id="graph" class="graph"></div>
	</div><!-- .content -->
</section>

</div><!--#app-content-->
</div><!--#app-wrapper-->


</body>
</html>
